<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='content'>

    </div>
    <script type="text/javascript">
        for (i = 1; i < 10; i++) {
            pageDOMimg = '<div id="page' + i + 'div"><img id="page' + i + '" usemap="#page' + i + 'map">'
            pageDOMmap = '<map id="page' + i + 'map" name="page' + i + 'map"></map></div>'
            content += pageDOMimg + pageDOMmap
        }
        console.log(content)
        document.getElementById('content').innerHTML = content
    </script>
</body>

</html>